<template>
  <div>
    <topHeader/>
    <div class="application-title">
      <img @click="$router.push('/')" class="application-title-img" :src="emergencyApplication" alt="">
      <p class="application-title-text">应急周转申请</p>
    </div>

    <!--    主体内容-->
    <div class="application-main">
      <!--      基本信息-->
      <div class="application-top">
        <!--        基本信息-->
        <div class="basic-information">
          <h4 class="basic-information-title">基本信息</h4>
          <!--          用款时间-->
          <div class="basic-date">
            <p class="basic-date-title">您的用款时间</p>
            <div>
              <el-date-picker
                  class="input"
                  v-model="form.useDate"
                  type="date"
                  disabled
                  popper-class="date-style"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
          </div>
        </div>
        <!--        还本续贷-->
        <div class="application-conditions">
          <p class="application-conditions-text">还本续贷</p>
          <dl class="application-conditions-content">
            <dt>您已符合还本续贷申请条件</dt>
            <dd>申请条件：用款次数<7次/年，年总金额<5000万，单笔金额200万~2500万，单笔额度≤过桥金额90%</dd>
          </dl>
        </div>
        <div></div>
      </div>
      <!--      2022年10月申请使用应急周转资金企业表-->
      <div class="application-center">
        <p class="application-center-text">2022年10月申请使用应急周转资金企业表</p>
        <div>
          <table class="application-center-table">
            <tr class="application-center-table-title">
              <th>原贷款银行</th>
              <th>贷款金额（万元）</th>
              <th>申请应急资金金额（万元）</th>
              <th>续贷银行</th>
              <th>贷款到期日</th>
              <th>预计用款天数</th>
            </tr>
            <tr class="application-center-table-title">
              <td>
                <input @blur="setInput(form.lendingBank,'lendingBank')" v-model="form.lendingBank">
                <p v-if="map.includes('lendingBank')">请输入原贷款银行</p>
                <p v-else-if="map.includes('lendingBankReg')">原贷款银行只能输入汉字</p>
              </td>
              <td>
                <input @blur="setInput(form.loanAmount,'loanAmount')" v-model="form.loanAmount">
                <p v-if="map.includes('loanAmount')">请输入贷款金额</p>
                <p v-else-if="map.includes('loanAmountReg')">贷款金额只能输入数值</p>
              </td>
              <td>
                <input @blur="setInput(form.formoeny,'formoeny')" v-model="form.formoeny">
                <p v-if="map.includes('formoeny')">请输入申请应急资金金额</p>
                <p v-else-if="map.includes('formoenyReg')">申请应急资金金额只能输入数值</p>
              </td>
              <td>
                <input @blur="setInput(form.renewalBank,'renewalBank')" v-model="form.renewalBank">
                <p v-if="map.includes('renewalBank')">请输入续贷银行</p>
                <p v-else-if="map.includes('renewalBankReg')">续贷银行只能输入汉字</p>
              </td>
              <td>
                <el-date-picker
                    class="application-center-table-title-input"
                    v-model="form.maturityDateOfLoan"
                    type="date"
                    disabled
                    popper-class="date-style">
                </el-date-picker>
              </td>
              <td>
                <input class="loanDate" v-model="form.loanDate" disabled>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <!--      企业运营情况表-->
      <div class="application-bottom">
        <p class="application-bottom-text">企业运营情况表</p>
        <div>
          <table class="application-bottom-table">
            <tr class="application-bottom-table-title">
              <th rowspan="2" colspan="1">企业名称</th>
              <th rowspan="2" colspan="1">所属辖区</th>
              <th rowspan="2" colspan="1">生产经营情况简介</th>
              <th rowspan="1" colspan="4">工业产值数据（万元）</th>
            </tr>
            <tr>
              <th>2022年1-<input class="application-bottom-table-title-month" type="text" @blur="isMonth"
                                v-model="month">月
              </th>
              <th>去年同期数</th>
              <th>2021年</th>
              <th>2022年</th>
            </tr>
            <tr class="application-bottom-table-content">
              <td>
                <input @blur="setInput(form.enterpriseName,'enterpriseName')" v-model="form.enterpriseName">
                <p v-if="map.includes('enterpriseName')">请输入企业名称</p>
                <p v-else-if="map.includes('enterpriseName')">企业名称只能输入汉字</p>
              </td>
              <td>
                <input @blur="setInput(form.jurisdiction,'jurisdiction')" v-model="form.jurisdiction">
                <p v-if="map.includes('jurisdiction')">请输入所属辖区行</p>
                <p v-else-if="map.includes('jurisdiction')">所属辖区只能输入汉字</p>
              </td>
              <td>
                <input @blur="setInput(form.basicInformation,'basicInformation')" v-model="form.basicInformation">
                <p v-if="map.includes('basicInformation')">请输入生产经营情况简介</p>
                <p v-else-if="map.includes('basicInformation')">生产经营情况简介只能输入汉字</p>
              </td>
              <td>
                <input @blur="setInput(form.industrialDate,'industrialDate')" v-model="form.industrialDate">
                <p v-if="map.includes('industrialDate')">请输入时间</p>
                <p v-else-if="map.includes('industrialDate')">时间格式不对</p>
              </td>
              <td>
                <input @blur="setInput(form.industrialLastYearNumber,'industrialLastYearNumber')"
                       v-model="form.industrialLastYearNumber">
                <p v-if="map.includes('industrialLastYearNumber')">请输入时间</p>
                <p v-else-if="map.includes('industrialLastYearNumber')">时间格式不对</p>
              </td>
              <td>
                <input @blur="setInput(form.industrialLastYear,'industrialLastYear')" v-model="form.industrialLastYear">
                <p v-if="map.includes('industrialLastYear')">请输入时间</p>
                <p v-else-if="map.includes('industrialLastYear')">时间格式不对</p>
              </td>
              <td>
                <input @blur="setInput(form.industrialThisYear,'industrialThisYear')" v-model="form.industrialThisYear">
                <p v-if="map.includes('industrialThisYear')">请输入时间</p>
                <p v-else-if="map.includes('industrialThisYear')">时间格式不对</p>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="application-submit">
        <el-button @click="submit">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
//头部公共组件
import topHeader from "@/components/header/header";
//应急周转图标
import emergencyApplication from '@/assets/images/emergency-application.png';
//isChina：判断输入是否为汉字   realNumber:判断是否输入为有1~3位小数的正实数
import {isChina, realNumber} from '@/utils/regular.js'

export default {
  name: "applicationBasicInformation",
  data() {
    return {
      month: '',// 月份
      map: [],// 用于存储为空的字段
      emergencyApplication,//应急周转图标
      form: {//2022年10月申请使用应急周转资金企业表
        useDate: new Date(),//用款时间
        lendingBank: "",//原贷款银行
        loanAmount: "",//贷款金额
        formoeny: "",//申请应急资金金额	万元
        renewalBank: "",//续贷银行
        maturityDateOfLoan: new Date(),//贷款到期日
        loanDate: 0,//预计用款天数
        enterpriseName: "",// 企业名称
        jurisdiction: "",//所属辖区
        basicInformation: "",//企业发展基本情况简述
        industrialDate: "",//工业产值数据
        industrialLastYearNumber: "",//去年同期数'
        industrialLastYear: "",// 去年
        industrialThisYear: ""
      },
    }
  },
  components: {
    topHeader,
  },
  methods: {
    //判断月份
    isMonth() {
      if (this.month === '') {
        this.$message.error("月份不能为空")
      } else {
        if (this.month > 12 || this.month < 1) {
          this.$message.error("所填月份不对")
        }
      }
    },
    mapDel(list, val) { // 封装统一方法，用于删除数组中的该字段
      for (let i = 0; i < list.length; i++) {
        if (list[i] === val) {
          list.splice(i, 1)
        }
      }
    },
    /*
    * 输入框失去焦点事件
    * formValue:传入的是表单数据，用于判断用户是否填入数据
    * value:标识，传入的是自定义的字符串，后续根据数组是否有该字段来动态显示错误提示
    * */
    setInput(formValue, value) {
      if (formValue === '') {// 第一层判断：如果传入的表单数据为空，则添加到数组中
        if (!this.map.includes(value)) {
          this.map.push(value)
        }
      } else {// 如果不为空，则从数组中删除该字段，以此来隐藏错误提示
        /*
        * 根据传入的value值判断用户输入的字段，在根据判断结果使用相对应的正则表达式进行校验
        * 如果校验结果如果，都要先删除用户之前为空输入而添加到数组中的字段，不然该错误提示无法隐藏
        * */
        if (value === 'lendingBank' || value === 'renewalBank') {
          if (!isChina(formValue)) {
            this.map.push(value + "Reg")
          } else {
            this.mapDel(this.map, value + "Reg")
          }
        } else if (value === 'loanAmount' || value === 'formoeny') {
          if (!realNumber(formValue)) {
            this.map.push(value + "Reg")
          } else {
            this.mapDel(this.map, value + "Reg")
          }
        }
        this.mapDel(this.map, value)
      }
    },
    /*
    * 点击下一步事件
    * 首先判断form中的字段是否有为空，如果有字段为空，则将该字段添加到map数组，以此对应哪个字段显示错误提示
    * 如果map数组为空，则表示所有字段都数据，则进行下一步
    * */
    submit() {
      for (let key in this.form) {
        if (this.form[key] === '') {
          this.map.push(key)
        }
      }
      if (this.map.length === 0) {
        console.log("跳转")
        this.$router.push({name: "ApplicationInformation"});
      }
    },
  }
}
</script>

<style src="./application-basic-Information.less" lang="less" scoped>

</style>
